<template>
    <div id="app">
<!--        :events="chartEvents"-->
<!--        :afterSetOption="afterSetOption" -->
        <ve-map   width="800px"  height="600px"
                  :tooltip="chartTooltip" :settings="chartSettings"
                  :geo="chartGeo" :series="chartSeries" ></ve-map>
    </div>


</template>

<script>

    export default {
        name: "China",
        created: function() {
            this.getCountryData=  this.$resource('http://localhost:8080/api/search_country/{country}');
            //加载疫情数据 放在 chinaData中
            this.getData();

            console.log(this.chinaData);

            // this.chartEvents = {
            //     click: (v) => {
            //         console.log("get!"+v)
            //     }
            // };


            this.chartTooltip = {
                formatter: function(v) {
                    var tpl = []
                    tpl.push(v.seriesName + '<br>')
                    tpl.push(v.name + '：' + v.value[2])
                    return tpl.join('@')
                }
            },

            this.chartSettings = {
                position: 'china',
                metrics: ['感染人数'],
                render:'svg',

            };
            this.chartSeries = [
                {
                    name: '感染人数',
                    type: 'effectScatter', // 'scatter'
                    coordinateSystem: 'geo',
                    symbolSize: 10,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,


                    data: this.chinaData,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            // show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#dd4650'
                        }
                    }
                }
                    ];
            this.chartGeo = {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            }
        },
        mounted:function(){
            this.cityName="请选择";
            // console.log("chartObj"+this.chartObj)
            // this.chartObj.setOption(
            //     {
            //         series:this.chinaData
            //     }
            // )
        },
        methods:{
            // afterSetOption (chartObj) {
            //     this.chartObj = chartObj;
            // },
            selectColor(t){
                    if(t===0)
                    {
                        return  'rgb(255,255,255)'
                    }else if (t<=100)
                    {
                        return    'rgb(255,190,192)'
                    }else if (t<=500)
                    {
                        return 'rgb(255,105,102)'
                    }else {
                        return 'rgb(255,28,28)'
                    }
            },
            getData(){


                // if (this.chinaData!==[]&&this.chinaData.length>0)
                // {
                //     alert(this.chinaData)
                //     return this.chinaData
                // }

                this.getCountryData.get({country:"China"})
                    .then(function (res) {
                        for (let i  in  res.data)
                        {
                            this.chinaData.push({
                                name:res.data[i].province,
                                value:[res.data[i].long,res.data[i].lat,res.data[i].number],
                                itemStyle:{
                                    color:this.selectColor(res.data[i].number)

                                }
                            })
                        }

                    });
            }
        },
        data(){
            return{
              chinaData:[]
            };
        }
    }
</script>

<style scoped>

</style>